<template>
  <!-- 在自定义事件中，$event 表示子组件传过来的数据 -->
  <!-- 在原生事件中，$event表示事件对象 -->
  <MyNumber :count="count" @update:count="fn" />
  <!-- Vue2 中的 .sync   其实就是注册了自定义事件  @update:count="count = $event" -->
  <!-- <MyNumber :count.sync="count" />  相当于 @update：count-->
  <MyNumber :count="count" @update:count="count = $event" />
  <!-- 在Vue3中  v-model 其实就是  @update:count="count = $event" 的语法糖 -->
  <!-- <MyNumber v-model:count="count" /> 相当于-->
  <MyNumber v-model="count" />
<h1>第二个版本的双向数据绑定</h1>
  <!-- 第二个版本的双向数据绑定 -->
  <MyNumberNew v-model="count2"/>
  <!-- 相当于是以下代码的简写 -->
  <MyNumberNew v-model:modelValue="count2"/>
  <!-- 也相当于 -->
  <MyNumberNew v-model:modelValue="count2" @update:modelValue = "count2 = $event" />
</template>

<script>
import { ref } from 'vue'
import MyNumber from './components/myNumber.vue'
import MyNumberNew from './components/myNumberNew.vue'
export default {
  components: { MyNumber, MyNumberNew },
  setup () {
    const count = ref(10)
    const count2 = ref(11)
    const fn = (val) => {
      console.log(13, val)
      count.value = val
    }
    return { count, fn, count2 }
  }
}
</script>

<style>
</style>
